<template>
    <!-- 结果展示区 -->
    <div class="resultArea">
        <div class="navList">
            <div class="NavTitle active">专业回答</div>
        </div>
        <div class="resultContent">
            <div class="resultAnswerList" v-if="answerList.length > 0">
                <div v-for="item in answerList" :key="item.index" class="resultAnswer">
                    <div class="question-title">{{ item.question }}</div>
                    
                    <!-- 图表渲染 -->
                    <div v-if="item.pandas_type === 'plot'" class="chart-container">
                        <div v-if="item.result.type === 'bar'">
                            <BarChart 
                                :chart-data="item.result.data"
                                :chart-options="item.result.options"
                            />
                        </div>
                        <div v-else-if="item.result.type === 'line'">
                            <LineChart 
                                :chart-data="item.result.data"
                                :chart-options="item.result.options"
                            />
                        </div>
                        <div v-else-if="item.result.type === 'pie'">
                            <PieChart 
                                :chart-data="item.result.data"
                                :chart-options="item.result.options"
                            />
                        </div>
                        <div v-else>
                            <p>暂不支持此图表类型: {{ item.result.type }}</p>
                        </div>
                    </div>
                    
                    <!-- 表格渲染 -->
                    <div v-else-if="item.pandas_type === 'dataframe'" class="table-container">
                        <el-table
                            :data="item.result.data"
                            border
                            style="width: 100%"
                            height="400"
                        >
                            <el-table-column
                                v-for="col in item.result.columns"
                                :key="col"
                                :prop="col"
                                :label="col"
                                width="180"
                            />
                        </el-table>
                    </div>
                    
                    <!-- 文本渲染 -->
                    <div v-else class="text-container">
                        <div v-if="typeof item.result === 'string'" v-html="marked(item.result)"></div>
                        <div v-else>
                            <pre>{{ JSON.stringify(item.result, null, 2) }}</pre>
                        </div>
                    </div>
                </div>
            </div>
            
            <div v-else class="empty-result">
                <div v-html="answer" :class="answer.length > 20 ? 'result' : ''"></div>
                <el-icon v-if="isLoading" class="is-loading">
                    <Loading />
                </el-icon>
            </div>
        </div>
    </div>
</template>
